import * as React from "react";
import moment from "moment";
import EleAnalysisECharts from "./compontents/EleAnalysisECharts";
import "./index.less";

export interface EnergyAnalysisProps {
  time: number;
  timeType: number;
  dataSouce: any;
}

export interface EnergyAnalysisState {
  timeType: number;
  dataTime: string;
  dataTimelast: string;
  dataTimeOnYear: string;
  eleEnergyData: { list: number[]; listLast: number[]; listOnYear: number[] };
  waterEnergyData: { list: number[]; listLast: number[]; listOnYear: number[] };
}

class EnergyAnalysis extends React.Component<
  EnergyAnalysisProps,
  EnergyAnalysisState
> {
  state = {
    timeType: 2,
    dataTime: "",
    dataTimelast: "",
    dataTimeOnYear: "",
    eleEnergyData: { list: [], listLast: [], listOnYear: [] },
    waterEnergyData: { list: [], listLast: [], listOnYear: [] },
  };
  render() {
    let {
      dataTime,
      dataTimelast,
      dataTimeOnYear,
      timeType,
      eleEnergyData,
      waterEnergyData,
    } = this.state;
    let { getSum, getChainCompar, getYearOnYear } = this;
    return (
      <>
        <div className="EnergyAnalysis">
          <h2>01&nbsp;&nbsp;能耗分析</h2>
          <div className="tit1">用电分析</div>
          <EleAnalysisECharts type={timeType} dataSouce={eleEnergyData} />
          <div className="pText">
            <p>
              从系统数据来看，{dataTime}累计用电量为{getSum(eleEnergyData.list)}
              kW·h，
            </p>
            <p>
              {dataTimelast}
              累计用电量为{getSum(eleEnergyData.listLast)}kW·h， 环比增长
              {getChainCompar(
                getSum(eleEnergyData.list),
                getSum(eleEnergyData.listLast)
              )}
              左右；
            </p>
            <p>
              {dataTimeOnYear}
              累计用电量为{getSum(eleEnergyData.listOnYear)}kW·h,{dataTime}
              相对与{dataTimeOnYear}同比增长
              {getYearOnYear(
                getSum(eleEnergyData.list),
                getSum(eleEnergyData.listOnYear)
              )}
              ,
            </p>
          </div>
          <div className="tit1">用水分析</div>
          <EleAnalysisECharts type={timeType} dataSouce={waterEnergyData} />
          <div className="pText">
            <p>
              从系统数据来看，{dataTime}
              累计用水量为{getSum(waterEnergyData.list)}m³，
            </p>
            <p>
              {dataTimelast}累计用水量为{getSum(waterEnergyData.listLast)}m³，
              环比增长
              {getChainCompar(
                getSum(waterEnergyData.list),
                getSum(waterEnergyData.listLast)
              )}
              左右；
            </p>
            <p>
              {dataTimeOnYear}
              累计用水量为{getSum(waterEnergyData.listOnYear)}m³,{dataTime}
              相对与
              {dataTimeOnYear}
              同比增长
              {getYearOnYear(
                getSum(waterEnergyData.list),
                getSum(waterEnergyData.listOnYear)
              )}
            </p>
          </div>
        </div>
      </>
    );
  }
  shouldComponentUpdate(
    newProps: EnergyAnalysisProps,
    newState: EnergyAnalysisState
  ) {
    if (newProps.time !== this.props.time) {
      //格式化时间获取（当前，上一单位，去年当前）
      this.FormatDate(newProps.timeType, newProps.time);
      this.getData(newProps.dataSouce);
    }
    return true;
  }
  componentWillMount() {
    this.FormatDate(this.props.timeType, this.props.time);
    this.getData(this.props.dataSouce);
  }
  /**方法函数 */
  //环比
  getChainCompar(thisNum: number, lastNum: number) {
    //环比增长率=（本期数-上期数）/上期数×100%。
    let str = lastNum ? this.toPercent((thisNum - lastNum) / lastNum) : "0%";
    return str;
  }
  //同比
  getYearOnYear(thisNum: number, lastYearNum: number) {
    let str = lastYearNum
      ? this.toPercent((thisNum - lastYearNum) / lastYearNum)
      : "0%";
    return str;
  }
  //小数转百分数
  toPercent(point: number) {
    var str = Number(point * 100).toFixed(1);
    str += "%";
    return str;
  }
  //求和
  getSum(list: number[]) {
    let sum: number = 0;
    list.map((num: number) => {
      sum += num;
      return num;
    });
    return sum;
  }
  //获取数据
  getData(data: any) {
    if (data) {
      let { eleEnergyData, waterEnergyData } = data;
      this.setState({
        eleEnergyData,
        waterEnergyData,
      });
    }
  }
  //格式化时间
  FormatDate(type: number, time: number) {
    let dataTime: string = "";
    let dataTimelast: string = "";
    let dataTimeOnYear: string = "";
    switch (type) {
      case 2:
        dataTime = moment(time).format("YYYY年MM月DD日");
        dataTimelast = moment(time)
          .subtract(1, "days")
          .format("YYYY年MM月DD日");
        dataTimeOnYear = moment(time)
          .subtract(1, "years")
          .format("YYYY年MM月DD日");
        break;
      case 3:
        dataTime = moment(time).format("YYYY年MM月");
        dataTimelast = moment(time).subtract(1, "months").format("YYYY年MM月");
        dataTimeOnYear = moment(time).subtract(1, "years").format("YYYY年MM月");
        break;
      case 4:
        dataTime = moment(time).format("YYYY年");
        dataTimelast = moment(time).subtract(1, "years").format("YYYY年");
        dataTimeOnYear = moment(time).subtract(1, "years").format("YYYY年");

        break;
      default:
        break;
    }
    this.setState({ dataTime, dataTimelast, dataTimeOnYear, timeType: type });
  }
}

export default EnergyAnalysis;
